<template>
	<view class="page">
		<view class="head">
			<image class="logo" src="../../../static/ailogo.png" mode=""></image>
			<view class="head_title">
				Hi!
			</view>
			<view class="head_subtitle">
				赶紧再试一试吧！
			</view>
		</view>
		<view class="application_title">
			我的应用
		</view>
		<view class="applicationList">
			<view :class="['applicationBox',index==activeLife ? 'activeBox' : '']"
				v-for="(item,index) in myApplicationList" :key="index" @click="activeAPP(item,index)">
				<image class="logo" src="../../../static/yytx.png" mode=""></image>
				<view class="title">
					{{item.aiuseTitle}}
				</view>
				<view class="label">
					{{item.aiuseContent}}
				</view>
				<view class="look"
					@click="gotoPage('/pages/aiuse/writing/index?aiuseId='+item.aiuseId+'&platformId='+selectedPlatformId)">
					去查看
				</view>
			</view>
		</view>
	</view>
	<tabBar></tabBar>
</template>

<script>
	export default {
		data() {
			return {
				activePlatform: 0,
				selectedPlatformId: '',
				activeLife: 0,
				activeCreate: 0,
				activeImage: 0,
				gptlist: [],
				myApplicationList: []
			}
		},

		onLoad() {
			this.getApplications(3); //生活应用
			this.getApplications(4); //AI图片创作
			this.getApplications(5); //AI创作应用
		},
		methods: {
			//设置选中的平台ID
			activeGPT(item, index) {
				console.log(item)
				this.activePlatform = index;
				this.selectedPlatformId = item.platformId;
				uni.navigateTo({
					url: "/pages/aiuse/native/index?value=" + item.name
				})
			},
			activeAPP(e, index) {
				this.activeLife = index
			},
			activeCreateApplication(e, index) {
				this.activeCreate = index
			},
			activeImageCreateApplication(e, index) {
				this.activeImage = index
			},
			/*获取数据*/
			getApplications(categoryId) {
				let self = this;
				self._get('plus/aiuse/aiuse/myAiuse', {}, function(res) {
					self.myApplicationList = res.data;
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 910rpx;
		background-image: url('../../../static/aiyybg.png');
		background-size: 100% 100%;
		margin-bottom: 44rpx;

		.head_title {
			position: absolute;
			top: 693rpx;
			left: 150rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.head_subtitle {
			position: absolute;
			top: 750rpx;
			left: 150rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.logo {
			width: 240rpx;
			height: 64rpx;
			margin-left: 30rpx;
			margin-top: 95rpx;
		}
	}

	.application_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		margin-bottom: 30rpx;
		margin-left: 37rpx;
	}

	.gptlist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 25rpx 78rpx 25rpx;

		.gptbox {
			text-align: center;
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			font-weight: 300;
			font-size: 30rpx;
			color: #333333;
		}

		.active {
			background: #2168EA;
			color: #FFFFFF;
			font-weight: 800;
			font-size: 32rpx;
		}
	}

	.applicationList {
		margin: 0 25rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 47rpx;

		.applicationBox {
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 220rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.logo {
				width: 110rpx;
				height: 110rpx;
				margin-top: 25rpx;
			}

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-top: 15rpx;
			}

			.label {
				font-size: 24rpx;
				color: #999999;
			}

			.look {
				text-align: center;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #D3D3D3;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 auto;
				margin-top: 35rpx;
				margin-bottom: 33rpx;
			}
		}

		.activeBox {
			background-image: url('../../../static/yybj2.png');
			background-size: 100% 100%;

			.title {
				color: #FFFFFF;
			}

			.label {
				color: #FFFFFF;
			}

			.look {
				background: #FFFFFF;
				color: #0F4BCB;
			}
		}
	}

	.applicationList::after {
		content: "";
		width: 220rpx;
	}
</style>